<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>高度不能自适应[请用标准浏览器查看]</title>
<style type="text/css">
<!--
* {
	margin: 0px;
	padding: 0px;
}

body {
	margin: 5px;
	font-size: 12px;
}

.box {
	background-color: #66CCFF;
	width: 200px;
	border: 1px solid #66CCCC;
}

.box2 {
	background-color: #33CC99;
	margin-right: 20px;
	width: 100px;
	border: 1px solid #336666;
	float: left; /*删掉这浮动也可以让父级高度自适应*/
}
-->
</style>
</head>

<body>
	<div class="box">
		我是父盒子,我的高没有设定,但是我的子盒子高过我时,浏览器中我的高不能自适应。
		<div class="box2">
			这个盒子是小盒子，它没有设定高度属性，其高度是随里面的文字的加多而自动升高的，但是当它的高度超过父级盒子时，在标准浏览器中并没有把父级撑高，这种情况与上面讲的子级宽度超过父级元素是一样的，但是这种高度自适度常是我们需要的，如何做到让高度自适应呢，常见的办法是在父级内加入以下样式：&lt;div
			style="clear:both"&gt;&lt;/div&gt;清除掉与其同级小盒子的浮动。</div>
		<!--<div style="clear:both"></div>去除这里的注释再看看，这样父级盒子的高级就可以自适应了-->
	</div>
</body>
</html>





